<template>
  <div class="app-container">
    <el-button type="primary" style="margin-bottom:20px" @click="Create">创建</el-button>
    
    <el-table :data="pageData.Data" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label='操作' width="195">
        <template slot-scope="scope">
         <a href='javascript:;' style="margin-right:5px;" v-if="$store.state.user.setListShow" @click="Edit(scope.row.ID)">编辑</a>
        </template>
      </el-table-column>
      <el-table-column label="序号" width="200">
        <template slot-scope="scope">
          {{scope.row.Sort}}
        </template>
      </el-table-column>
      <el-table-column label="角色名" width="200">
        <template slot-scope="scope">
          {{scope.row.RoleName}}
        </template>
      </el-table-column>
      <el-table-column label="角色备注">
        <template slot-scope="scope">
          <span>{{scope.row.Remark}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top:20px;float:right">
      <el-pagination background :current-page="pageData.Page" :page-sizes="pageData.PageSizes" :page-size="pageData.PageSize" layout="total, sizes, prev, pager, next"
            :total="pageData.TotalPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/Role'

export default {
  data() {
    return {
      pageData: {
        Page: 0,
        PageSize: 10,
        PageSizes: [10, 20, 50, 100],
        TotalPage: 0,
        Data: null
      },
      listLoading: true
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  watch: {
    '$route': 'fetchData'
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleSizeChange(PageSize) {
      this.pageData.PageSize = PageSize
      this.fetchData()
    },
    handleCurrentChange(Page) {
      this.pageData.Page = Page
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      var input = {
        PageIndex: this.pageData.Page,
        PageSize: this.pageData.PageSize
      }
      // getList(input).then(response => {
      //   this.pageData.Page = response.Entity.Page
      //   this.pageData.TotalPage = response.Entity.TotalPage
      //   this.pageData.Data = response.Entity.Data
      //   this.listLoading = false
      // })
      this.$http.Post(sessionStorage.getList,{input:input}).then(response=>{
        this.pageData.Page = response.Entity.Page
        this.pageData.TotalPage = response.Entity.TotalPage
        this.pageData.Data = response.Entity.Data
        this.listLoading = false
      })
    },
    Create() {
      this.$router.push({ name: 'RoleDetail', query: { id: null }})
    },
    Edit(ID) {
      // this.$router.push({ name: 'RoleDetail', query: { id: ID }})
      this.$router.push({ name: 'RoleDetail', query: { id: ID }})
    }
  }
}
</script>
